@import "../color";

.foot-page {
  width: 100vw;
  height: 395px;
  padding: 32px 0;

  .foot-box{
    width: 1180px;
    height: 300px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .scroll-box{
      width: 850px;
      height: 300px;
      box-shadow: 0 0 15px 0 rgba(31, 56, 88, 0.08);
      border-radius: 3px;
      overflow: hidden;


      .last-head {
        width: 850px;
        height: 50px;
        padding: 0 14px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(31, 56, 88, 0.06);
        z-index: 999;


        .last-title {
          color: #000;
          font-size: 14px;
          font-weight: bold;
        }

        .last-more {
          color: rgba(31, 56, 88, 0.60);
          font-size: 14px;
        }
      }


      .ant-list-split .ant-list-item {
        border-bottom: none;
        overflow: hidden;
      }

      .ul-div{
        width: 850px;
        height: 250px;
        overflow: hidden;


        .scroll-ul {
          width: 850px;
          height: 9999px;
          overflow: hidden;
          animation: moving 10s linear infinite;

          .li-work{
            width: 100%;
            height: 50px;
            padding: 0 14px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            overflow: hidden;
            .name{
              width: 400px;
              font-size: 14px;
              color: #3c99d8;
              overflow: hidden;
              text-overflow: ellipsis;
              font-weight: 400;
              cursor: pointer;

            }
            .workPosition,.time{
              font-size: 14px;
              color: rgba(0,0,0,0.6);
              overflow: hidden;
              text-overflow: ellipsis;
              font-weight: 400;
              cursor: pointer;
              width: 100px;
              text-align: center;

            }
          }
        }

        .scroll-ul:hover{
          animation-play-state: paused;
        }

        @keyframes moving {
          0%{transform: translateY(0px);}
          10%{transform: translateY(-50px);}
          20%{transform: translateY(-100px);}
          30%{transform: translateY(-150px);}
          40%{transform: translateY(-200px);}
          50%{transform: translateY(-250px);}
          60%{transform: translateY(-300px);}
          70%{transform: translateY(-350px);}
          80%{transform: translateY(-400px);}
          90%{transform: translateY(-450px);}
          100%{transform: translateY(-500px);}
        }
      }

    }

    .show-tip {
      width: 310px;
      height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;


      .top-tip {
        width: 310px;
        height: 140px;
        box-shadow: 0 0 15px 0 rgba(31, 56, 88, 0.08);
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;

        .top-img {
          width: 179px;
        }

        .bottom-img {
          width: 260px;
        }

      }
    }

  }



}
